<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search()">
			<el-form-item label="项目名称">
				<el-input v-model="state.queryForm.standardProjectName" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="分配状态">
				<el-select v-model="state.queryForm.allocationStatus" placeholder="请选择" style="width: 100%">
					<el-option v-for="item in optionList1" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="管理账号">
				<el-select v-model="state.queryForm.projectManager" placeholder="请选择" style="width: 100%">
					<el-option v-for="item in optionList2" :key="item.id" :label="item.cnName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="立项时间">
				<el-date-picker
					v-model="state.queryForm.time"
					type="daterange"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					style="width: 100%"
					@change="changeTime"
				></el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="search()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="标准项目" name="1"></el-tab-pane>
			<el-tab-pane label="前瞻性研究项目" name="2"></el-tab-pane>
		</el-tabs>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" stripe class="layout-table">
			<el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
			<el-table-column prop="standardProjectName" label="项目名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="proStage" label="项目状态" header-align="center" align="center"></el-table-column>
			<el-table-column prop="category" label="项目类型(标准/前瞻性项目)" header-align="center" align="center"></el-table-column>
			<el-table-column prop="initiationTime" label="立项时间" header-align="center" align="center"></el-table-column>
			<el-table-column prop="projectManagerNameA" label="角色A" header-align="center" align="center"></el-table-column>
			<el-table-column prop="projectManagerNameB" label="角色B" header-align="center" align="center"> </el-table-column>
			<el-table-column prop="allocationStatus" label="分配状态" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.queryForm.pageNum"
			:page-size="state.queryForm.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { queryUserApi } from '@/api/system/rbac'
import { accountAllocationApi } from '@/api/system/account'
import { start } from 'nprogress'
const state = reactive({
	queryForm: {
		category: 'bz', // bz/qz
		standardProjectName: '',
		allocationStatus: '', // assigned/unassigned
		projectManager: '',
		startDate: '',
		endDate: '',
		time: '',
		pageNum: 1,
		pageSize: 10
	},
	dataListLoading: false,
	total: 100,
	dataList: []
})

const activeName = ref('1')
const optionList2 = ref([])

const changeTime = (e: any) => {
	state.queryForm.startDate = e[0] ? e[0] : ''
	state.queryForm.endDate = e[1] ? e[1] : ''
}

const handleClick = () => {
	console.log('activeName: ', activeName.value)
	state.queryForm.category = activeName.value === '1' ? 'qz' : 'bz'
	state.queryForm.pageNum = 1
	getDataList()
}
onMounted(() => {
	getUserList()
	getDataList()
})
const getUserList = () => {
	queryUserApi({
		cnName: '',
		loginName: '',
		pageIndex: 1,
		pageSize: 1000,
		roleCode: 'ZZADMIN,SHZZ'
	}).then(res => {
		optionList2.value = res.data.list
	})
}
const pickerOptions = ref({
	disabledDate(time) {
		// 禁用所有过去的日期，只允许选择当前日期及以后的时间
		return time.getTime() < Date.now()
	},
	selectableRange: '00:00:00 - 23:59:59' // 限制时间选择范围为00:00:00到23:59:59
})

const optionList1 = [
	{
		value: 'assigned',
		label: '已分配'
	},
	{
		value: 'unassigned',
		label: '未分配'
	}
]

const checkindex = ref('1')
const handleMenuSelect = (item: string) => {
	console.log('menu item: ', item)
	checkindex.value = item
}
const getDataList = () => {
	accountAllocationApi({
		category: state.queryForm.category,
		standardProjectName: state.queryForm.standardProjectName,
		allocationStatus: state.queryForm.allocationStatus,
		projectManager: state.queryForm.projectManager,
		startDate: state.queryForm.startDate,
		endDate: state.queryForm.endDate,
		pageIndex: state.queryForm.pageNum,
		pageSize: state.queryForm.pageSize
	}).then(res => {
		state.dataList = res.data.list
		state.total = res.data.total
	})
}
const search = () => {
	state.queryForm.pageNum = 1
	getDataList()
}

const reset = () => {
	state.queryForm.pageNum = 1
	state.queryForm.pageSize = 10
	state.queryForm.standardProjectName = ''
	state.queryForm.allocationStatus = ''
	state.queryForm.projectManager = ''
	state.queryForm.startDate = ''
	state.queryForm.endDate = ''
	state.queryForm.time = []
	getDataList()
}
const selectionChangeHandle = () => {}
const sizeChangeHandle = (e: number) => {
	state.queryForm.pageSize = e
	state.queryForm.pageNum = 1
	getDataList()
}
const currentChangeHandle = (e: number) => {
	state.queryForm.pageNum = e
	getDataList()
}
</script>
<style scoped>
.zh-main-menu {
	border: 1px solid #ddd;
	border-right: 1px solid #ddd !important;
}
</style>
<style>
/* 菜单选中 */
.zh-main-menu .el-sub-menu.is-active {
	background-color: #409eff;
}

.zh-main-menu .el-sub-menu.is-active .el-sub-menu__title {
	color: white !important;
}

.zh-main-menu .el-sub-menu:hover {
	background-color: #409eff;
}

.zh-main-menu .el-sub-menu:hover .el-sub-menu__title {
	color: white !important;
}
</style>
